import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const BarCharts = ({ title, data }) => {
  // 使用useRef hook函数获取dom元素
  const chartRef = useRef(null)

  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(chartRef.current, null, {
      width: 500,
      height: 400
    });
    // 绘制图表
    myChart.setOption({
      title: {
        text: title
      },
      tooltip: {},
      xAxis: {
        data: ['Vue', 'React', 'Angular']
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: data
        }
      ]
    });
  })
  return(
    <div className="BarCharts">
      <div ref={chartRef}></div>
    </div>
  )
}
export default BarCharts